<template>
  <div class="wrap">
    <!-- 头部 -->
   <div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="/">
        
          <img src="//static2.cnodejs.org/public/images/cnodejs_light.svg">
        
      </a>

      <form id="search_form" class="navbar-search" action="/search">
        <input type="text" id="q" name="q" class="search-query span3" value="">
      </form>
      <ul class="nav pull-right">
        <li ><a href="/">首页</a></li>
        
        <li><a href="/getstart">新手入门</a></li>
        <li><a href="/api">API</a></li>
        
        <li><a href="/about" target="">关于</a></li>
        
        
        <li><a href="/signup">注册</a></li>
        <li><a href="/signin">登录</a></li>
        
      </ul>
      <a class="btn btn-navbar" id="responsive-sidebar-trigger">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
  </div>
</div>
   
    <div class="content">
      <div class="tab-header">
        <div class="tab-item acitve">全部</div>
        <div class="tab-item">精华</div>
        <div class="tab-item">分享</div>
        <div class="tab-item">问答</div>
        <div class="tab-item">招聘</div>
        <div class="tab-item">客户端测试</div>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/227713?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 2 </span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 27797 </span>
        </span>

        <span class="tab-item1">置顶</span>

        <a
          class="topic_title"
          href="/topic/618e03abe6c91ab080916c8a"
          title="精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至"
        >
          精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120"
          />
          <span class="last_active_time">9 天前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/958063?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 2 </span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 27797 </span>
        </span>

        <span class="tab-item1">置顶</span>

        <a
          class="topic_title"
          href="/topic/5fdb44d70f99cb37f45e3410"
          title="【2021/11/26】请大家遵纪守法，勿发布不合规内容"
        >
          【2021/11/26】请大家遵纪守法，勿发布不合规内容
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/91187541?v=4&s=120"
          />
          <span class="last_active_time">7天前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/227713?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 2 </span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 27797 </span>
        </span>

        <span class="tab-item1">置顶</span>

        <a
          class="topic_title"
          href="/topic/618e06dbe6c91a00a3916cae"
          title="【望周知，求扩散】淘宝 NPM 镜像站喊你切换新域名啦"
        >
          【望周知，求扩散】淘宝 NPM 镜像站喊你切换新域名啦
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/83209772?v=4&s=120"
          />
          <span class="last_active_time">9 天前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/2081487?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 16</span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 151648 </span>
        </span>

        <span class="tab-item1">置顶</span>

        <a
          class="topic_title"
          href="/topic/6108bbc2a5d29d175c2d4208"
          title="2021 Node.js 开发者问卷调查"
        >
          2021 Node.js 开发者问卷调查
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/19908330?v=4&s=120"
          />
          <span class="last_active_time">10 天前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/78284561?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 6</span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 52448 </span>
        </span>

        <span class="tab-item2">分享</span>

        <a
          class="topic_title"
          href="/topic/61107aa3a5d29d23f62d5460"
          title="aowin  之 vue的生命周期"
        >
          aowin 之 vue的生命周期
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/78284561?v=4&s=120"
          />
          <span class="last_active_time">2小时前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/9312044?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 2</span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 528 </span>
        </span>

        <span class="tab-item2">分享</span>

        <a
          class="topic_title"
          href="/topic/61a8275d3dbd66727c319206"
          title="VS Code 版 CNode 已上线"
        >
          VS Code 版 CNode 已上线
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img
            class="user_small_avatar"
            src="https://avatars.githubusercontent.com/u/19908330?v=4&s=120"
          />
          <span class="last_active_time">19小时前</span>
        </a>
      </div>
      <div class="topic_title_wrapper">
        <img
          class="touxiang"
          src="https://avatars.githubusercontent.com/u/92838042?v=4&s=120"
          alt=""
        />
        <span class="reply_count pull-left">
          <span class="count_of_replies" title="回复数"> 0</span>
          <span class="count_seperator">/</span>
          <span class="count_of_visits" title="点击数"> 54 </span>
        </span>

        <span class="tab-item2">分享</span>

        <a
          class="topic_title"
          href="/topic/61a8aadd3dbd662785319323"
          title="产品对比：TeamCode DCS VS Docker Dev Environment"
        >
          产品对比：TeamCode DCS VS Docker Dev Environment
        </a>
        <a
          class="last_time pull-right"
          href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6"
        >
          <img class="user_small_avatar" />
          <span class="last_active_time">21小时前</span>
        </a>
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>


<style scoped>
/* 头部部分 */
.navbar{
width: 100%;
background: #444;
height: 50px;

}
.navbar .container {
    width: 100%;
    min-width: 960px;
    margin: 0 auto;
    max-width: 1400px;
    height: 40px;
}
.navbar-inner {
    background: 0 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 90%;
    margin: auto;
    padding: 5px;
}

.navbar-inner {
    min-height: 40px;
}
navbar .brand:focus, .navbar .brand:hover {
    text-decoration: none;
}
.navbar .brand {
    width: 120px;
    padding: 3px 20px;
    height: 34px;
    line-height: 34px;
    color: #ccc;
    font-weight: 700;
}
.breadcrumb>li, .navbar .brand {
    text-shadow: none;
}
.navbar .brand {
    display: block;
    float: left;
    padding: 10px 20px;
   position: relative;
    font-size: 20px;
    font-weight: 200;
    color: #777;
    text-shadow: 0 1px 0 #fff;
    top:0px;
}
.navbar .search-query.focused, .navbar .search-query:focus, .navbar .search-query:hover {
    background-color: #fff;
     
}
.navbar .search-query {
   
    background: url(	https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
    padding: 3px 5px 3px 22px;
    color: #666;
    border: 0;
    margin-top: 18px;
    transition: all .5s;
}
.navbar-search .search-query {
    padding: 4px 14px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.navbar-search .search-query, button, input, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}


.navbar .nav.pull-right[data-v-469af010] {
    float: right;
    margin-right: 0;
}

ul {
    height: 40px;
    width: 100%;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    position: relative;
    
    float: left;
}
.navbar .nav>li {
    float: left;
   
}

.navbar .nav.pull-right {
    position: absolute;
    float: right;
    margin-right: 0;
    width: 400px;
    top: 10px;
    right: 0px;
    left: 1101px;
}
.navbar .nav {
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
}
.pull-right {
    float: right;
}
.pull-right {
    float: right;
}
.nav {
    margin-bottom: 20px;
    margin-left: 0;
}
.breadcrumb, .carousel-indicators, .dropdown-menu, .media-list, .nav, .pager, .thumbnails {
    list-style: none;
}
ol, ul {
    padding: 0;
    margin: 0 0 10px 25px;
     float: left;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
     float: left;
}
.navbar {
    margin-bottom: 0;
    z-index: 9;
    width: 100%;
    position: relative;
    background: #444;
    font-size: 13px;
}

.navbar .nav>li {
    float: left;
}
dd, dt, li {
    line-height: 20px;
     float: left;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
     float: left;
}
.breadcrumb, .carousel-indicators, .dropdown-menu, .media-list, .nav, .pager, .thumbnails {
    list-style: none;
}
user agent stylesheet
ul {
    list-style-type: disc;
     float: left;
}
.navbar {
    margin-bottom: 0;
    z-index: 9;
    width: 100%;
    position: relative;
    background: #444;
    font-size: 13px;
}
.navbar .nav>li>a {
    text-shadow: none;
     color: #fff;
     float: left;
}
.navbar .nav>li>a {
    float: none;
    padding: 10px 15px;
    color: #777;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
     font-size: 5px;
     float: left;
}
.nav-header, .nav>li>a {
    display: block;
}
a {
    color: #08c;
    text-decoration: none;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
   
}
dd, dt, li {
    line-height: 20px;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
.breadcrumb, .carousel-indicators, .dropdown-menu, .media-list, .nav, .pager, .thumbnails {
    list-style: none;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
.navbar {
    margin-bottom: 0;
    z-index: 9;
    width: 100%;
    position: relative;
    background: #444;
    font-size: 13px;
}


/* 内容部分 */
.reply_count {
  width: 70px;
  display: inline-block;
  text-align: center;
  position: relative;
  left: 5px;
}

.count_of_visits {
  color: grey;
}

.count_of_replies {
  color: #9e78c0;
}
.wrap {
  height: 100%;
  overflow: hidden;
}
.content {
  height: 100%;
  margin: 100px 300px 100px 300px;
}
.tab-header {
  padding: 10px;
  background-color: #f6f6f6;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
}
.tab-item {
  float: left;
  margin: 0 10px;
  cursor: pointer;
  color: #80bd01;
  font-size: 14px;
  padding: 3px;
}
.acitve {
  color: #fff;
  background: #80bd01;
  border-radius: 3px;
}
.tab-item1 {
  margin: 0 10px;
  cursor: pointer;
  color: #fff;
  background: #80bd01;
  font-size: 14px;
  padding: 3px;
  position: relative;
  left: 5px;
  border-radius: 3px 3px 3px 3px;
  overflow: hidden;
}
.tab-item2 {
  margin: 0 10px;
  cursor: pointer;
  background-color: #e5e5e5;
  color: #999;
  font-size: 14px;
  padding: 3px;
  position: relative;
  left: 5px;
  border-radius: 3px 3px 3px 3px;
  overflow: hidden;
  width: 100%;
}

.touxiang {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  position: relative;
  top: 10px;
}
.topic_title_wrapper {
  white-space: nowrap;
  float: left;
  width: 100%;
  border: 1px;
  border-bottom: 1px solid #f0f0f0;
}
a:-webkit-any-link {
  color: black;
  cursor: pointer;
  text-decoration: underline;
  max-width: 70%;

  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 30px;
  position: relative;
  text-decoration: none;
  left: 5px;
}
.last_time .user_small_avatar {
  height: 18px;
  width: 18px;
  vertical-align: middle;
  margin-right: 0.5em;
  border-radius: 3px;
  border: 0px;
}

.last_time .last_active_time {
  text-align: right;
  min-width: 50px;
  display: inline-block;
  white-space: nowrap;
  color: grey;
}
.pull-right {
  width: 100px;
  float: right;
}
</style>
